<template>
  <div class="home">
    <div>
      <el-radio-group v-model="radio1">
        <el-radio label="1" size="large" border>上传康复计划明细</el-radio>
        <el-radio label="2" size="large" border>上传康复计划模板</el-radio>
      </el-radio-group>
    </div>
    <!-- 上传明细 -->
    <div v-if="radio1 == '1'">
      <div class="title">
        <span class="demonstration">选择时间</span>
        <el-date-picker v-model="Param.addRehabilitationDetailReq.rehabilitationDate" type="date" placeholder="选择月份"
          popper-class='custom-class' />
      </div>
      <div class="title">
        明细id： <el-input v-model="Param.addRehabilitationDetailReq.developRehabilitationPlanId" placeholder="点击输入内容" />
      </div>
      <div class="title">
        计划类型： <el-radio-group v-model="Param.addRehabilitationDetailReq.type">
          <el-radio :label="'INPUT_CHOICE'">输入选择</el-radio>
          <el-radio :label="'INPUT_NUM'">输入数字</el-radio>
          <el-radio :label="'INPUT_CONTENT'">输入字符串</el-radio>
          <el-radio :label="'SENSOR_GYROSCOPE'">传感器：陀螺仪</el-radio>
          <el-radio :label="'SENSOR_THERMOMETER'">传感器：体温计</el-radio>
          <el-radio :label="'SENSOR_TAPE'">传感器：卷尺</el-radio>
        </el-radio-group>
      </div>
      <div class="title">
        标签： <el-input v-model="Param.addRehabilitationDetailReq.label" placeholder="点击输入内容" />
      </div>
      <div class="title">
        视频封面url： <el-input v-model="Param.addRehabilitationVideoReq.coverImageUrl" placeholder="点击输入内容" />
      </div>
      <div class="title">
        视频url： <el-input v-model="Param.addRehabilitationVideoReq.videoUrl" placeholder="点击输入内容" />
      </div>
      <!-- 选择 -->
      <div v-if="Param.addRehabilitationDetailReq.type === 'INPUT_CHOICE'">
        <div class="title">
          添加问题： <el-input v-model="Param.addRehabilitationChoiceReq.question" placeholder="点击输入内容" />
        </div>
        <div class="title">
          是否为单选：<el-radio-group v-model="Param.addRehabilitationChoiceReq.multiple">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </div>

        <div class="title">
          <div>添加选项: <button class="add-choice" @click="drawer = true"> 添加选项内容</button> </div>
          <el-drawer v-model="drawer" title="添加问题" :with-header="false" :direction="'ltr'" style="width:60%; ">
            选项内容：<el-input v-model="optionContent" placeholder="点击输入内容" style="margin: 10px;" />
            <button class="add-choice" @click="addData">确认添加</button>
          </el-drawer>
        </div>
        <div class="content">
          <h5 v-for=" item, index in  Param.addRehabilitationChoiceReq.choiceList" :key="index"> {{ index + 1 }}、 {{ item
          }}
          </h5>
        </div>
      </div>
      <!-- 输入数字 -->
      <div v-if="Param.addRehabilitationDetailReq.type === 'INPUT_NUM'">
        <div class="title">
          添加问题: <el-input v-model="Param.addRehabilitationNumReq.question" placeholder="点击输入内容" />
        </div>
        <div class="title">
          测量最小值： <el-input v-model="Param.addRehabilitationNumReq.minValue" placeholder="点击输入内容" />
        </div>
        <div class="title">
          测量最大值： <el-input v-model="Param.addRehabilitationNumReq.maxValue" placeholder="点击输入内容" />
        </div>
        <div class="title">
          保留小数位数: <el-input v-model="Param.addRehabilitationNumReq.digits" placeholder="点击输入内容" />
        </div>
        <div class="title">
          单位: <el-input v-model="Param.addRehabilitationNumReq.measureUnit" placeholder="点击输入内容" />
        </div>
      </div>
      <!-- 输入字符串 -->
      <div v-if="Param.addRehabilitationDetailReq.type === 'INPUT_CONTENT'">
        <div class="title">
          添加问题: <el-input v-model="Param.addRehabilitationContentReq.question" placeholder="点击输入内容" />
        </div>
        <div class="title">
          最小字数: <el-input v-model="Param.addRehabilitationContentReq.minLength" placeholder="点击输入内容" />
        </div>
        <div class="title">
          最大字数: <el-input v-model="Param.addRehabilitationContentReq.maxLength" placeholder="点击输入内容" />
        </div>
      </div>
      <!-- 传感器：陀螺仪 -->
      <div v-if="Param.addRehabilitationDetailReq.type === 'SENSOR_GYROSCOPE'">
        <div class="title">
          弯腿次数: <el-input v-model="Param.addRehabilitationSensorGyroscopeReq.flexionTimes" placeholder="点击输入内容" />
        </div>
        <div class="title">
          弯腿角度: <el-input v-model="Param.addRehabilitationSensorGyroscopeReq.flexionAngle" placeholder="点击输入内容" />
        </div>
        <div class="title">
          伸腿次数: <el-input v-model="Param.addRehabilitationSensorGyroscopeReq.extensionTimes" placeholder="点击输入内容" />
        </div>
        <div class="title">
          伸腿角度: <el-input v-model="Param.addRehabilitationSensorGyroscopeReq.extensionAngle" placeholder="点击输入内容" />
        </div>
      </div>
    </div>
    <!-- 上传模板 ================================================================================================-->
    <div v-else>
      <div class="title">
        输入模板类型： <el-input v-model="Param2.addRehabilitationDetailTemplateReq.template" placeholder="点击输入内容" />
      </div>
      <div class="title">
        分组： <el-input v-model="Param2.addRehabilitationDetailTemplateReq.group" placeholder="点击输入内容" />
      </div>
      <div class="title">
        排序编号： <el-input v-model="Param2.addRehabilitationDetailTemplateReq.orderNumber" placeholder="点击输入内容" />
      </div>
      <div class="title">
        第几天： <el-input v-model="Param2.addRehabilitationDetailTemplateReq.day" placeholder="点击输入内容" />
      </div>
      <div class="title">
        计划类型： <el-radio-group v-model="Param2.addRehabilitationDetailTemplateReq.type">
          <el-radio :label="'INPUT_CHOICE'">输入选择</el-radio>
          <el-radio :label="'INPUT_NUM'">输入数字</el-radio>
          <el-radio :label="'INPUT_CONTENT'">输入字符串</el-radio>
          <el-radio :label="'SENSOR_GYROSCOPE'">传感器：陀螺仪</el-radio>
          <el-radio :label="'SENSOR_THERMOMETER'">传感器：体温计</el-radio>
          <el-radio :label="'SENSOR_TAPE'">传感器：卷尺</el-radio>
        </el-radio-group>
      </div>
      <div class="title">
        标签： <el-input v-model="Param2.addRehabilitationDetailTemplateReq.label" placeholder="点击输入内容" />
      </div>
      <div class="title">
        视频封面url： <el-input v-model="Param2.addRehabilitationTemplateVideoReq.coverImageUrl" placeholder="点击输入内容" />
      </div>
      <div class="title">
        视频url： <el-input v-model="Param2.addRehabilitationTemplateVideoReq.videoUrl" placeholder="点击输入内容" />
      </div>
      <!-- 选择 -->
      <div v-if="Param2.addRehabilitationDetailTemplateReq.type === 'INPUT_CHOICE'">
        <div class="title">
          添加问题： <el-input v-model="Param2.addRehabilitationDetailTemplateChoiceReq.question" placeholder="点击输入内容" />
        </div>
        <div class="title">
          是否为单选：<el-radio-group v-model="Param2.addRehabilitationDetailTemplateChoiceReq.multiple">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </div>

        <div class="title">
          <div>添加选项: <button class="add-choice" @click="drawer = true"> 添加选项内容</button> </div>
          <el-drawer v-model="drawer" title="添加问题" :with-header="false" :direction="'ltr'" style="width:60%; ">
            选项内容：<el-input v-model="optionContent" placeholder="点击输入内容" style="margin: 10px;" />
            <button class="add-choice" @click="addData">确认添加</button>
          </el-drawer>
        </div>
        <div class="content">
          <h5 v-for=" item, index in  Param2.addRehabilitationDetailTemplateChoiceReq.choiceList" :key="index"> {{ index +
            1 }}、 {{ item
  }}
          </h5>
        </div>
      </div>
      <!-- 输入数字 -->
      <div v-if="Param2.addRehabilitationDetailTemplateReq.type === 'INPUT_NUM'">
        <div class="title">
          添加问题: <el-input v-model="Param2.addRehabilitationDetailTemplateNumReq.question" placeholder="点击输入内容" />
        </div>
        <div class="title">
          测量最小值： <el-input v-model="Param2.addRehabilitationDetailTemplateNumReq.minValue" placeholder="点击输入内容" />
        </div>
        <div class="title">
          测量最大值： <el-input v-model="Param2.addRehabilitationDetailTemplateNumReq.maxValue" placeholder="点击输入内容" />
        </div>
        <div class="title">
          保留小数位数: <el-input v-model="Param2.addRehabilitationDetailTemplateNumReq.digits" placeholder="点击输入内容" />
        </div>
        <div class="title">
          单位: <el-input v-model="Param2.addRehabilitationDetailTemplateNumReq.measureUnit" placeholder="点击输入内容" />
        </div>
      </div>
      <!-- 输入字符串 -->
      <div v-if="Param2.addRehabilitationDetailTemplateReq.type === 'INPUT_CONTENT'">
        <div class="title">
          添加问题: <el-input v-model="Param2.addRehabilitationDetailTemplateContentReq.question" placeholder="点击输入内容" />
        </div>
        <div class="title">
          最小字数: <el-input v-model="Param2.addRehabilitationDetailTemplateContentReq.minLength" placeholder="点击输入内容" />
        </div>
        <div class="title">
          最大字数: <el-input v-model="Param2.addRehabilitationDetailTemplateContentReq.maxLength" placeholder="点击输入内容" />
        </div>
      </div>
      <!-- 传感器：陀螺仪 -->
      <div v-if="Param2.addRehabilitationDetailTemplateReq.type === 'SENSOR_GYROSCOPE'">
        <div class="title">
          弯腿次数: <el-input v-model="Param2.addRehabilitationDetailTemplateSensorGyroscopeReq.flexionTimes"
            placeholder="点击输入内容" />
        </div>
        <div class="title">
          弯腿角度: <el-input v-model="Param2.addRehabilitationDetailTemplateSensorGyroscopeReq.flexionAngle"
            placeholder="点击输入内容" />
        </div>
        <div class="title">
          伸腿次数: <el-input v-model="Param2.addRehabilitationDetailTemplateSensorGyroscopeReq.extensionTimes"
            placeholder="点击输入内容" />
        </div>
        <div class="title">
          伸腿角度: <el-input v-model="Param2.addRehabilitationDetailTemplateSensorGyroscopeReq.extensionAngle"
            placeholder="点击输入内容" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, onMounted, toRefs, watch, watchEffect } from 'vue'
import { newDate } from './common'
const emit = defineEmits(['handleParam', 'handleFlge'])
const Param: any = ref({
  addRehabilitationDetailReq: {
    developRehabilitationPlanId: '',
    rehabilitationDate: '',
    type: '',
    content: '',
    label: ''
  },
  addRehabilitationVideoReq: {
    coverImageUrl: '',
    videoUrl: ''
  },
  addRehabilitationChoiceReq: {
    question: '',
    multiple: 0,
    choiceList: []
  },
  addRehabilitationNumReq: {
    minValue: '',
    maxValue: '',
    digits: '',
    measureUnit: '',
    question: ''
  },
  addRehabilitationContentReq: {
    minLength: '',
    maxLength: '',
    question: ''
  },
  addRehabilitationSensorGyroscopeReq: {
    flexionTimes: '',
    flexionAngle: '',
    extensionTimes: '',
    extensionAngle: ''
  }
})
const Param2: any = ref({
  addRehabilitationDetailTemplateReq: {
    template: '通用',
    day: '',
    type: '',
    content: '',
    label: '',
    group:'',
    orderNumber:0,
  },
  addRehabilitationTemplateVideoReq: {
    coverImageUrl: '',
    videoUrl: ''
  },
  addRehabilitationDetailTemplateChoiceReq: {
    question: '',
    multiple: 0,
    negativeTerm: null,
    choiceList: []
  },
  addRehabilitationDetailTemplateNumReq: {
    minValue: '',
    maxValue: '',
    digits: '',
    measureUnit: '',
    question: ''
  },
  addRehabilitationDetailTemplateContentReq: {
    minLength: '',
    maxLength: '',
    question: ''
  },
  addRehabilitationDetailTemplateSensorGyroscopeReq: {
    flexionTimes: '',
    flexionAngle: '',
    extensionTimes: '',
    extensionAngle: ''
  }
})
const radio1 = ref('1')
const optionContent: any = ref('')
const drawer = ref(false)
const addData = () => {
  drawer.value = false
  if (radio1.value === '1') {
    Param.value.addRehabilitationChoiceReq.choiceList.push(optionContent.value)
  } else {
    Param2.value.addRehabilitationDetailTemplateChoiceReq.choiceList.push(optionContent.value)
  }
  optionContent.value = ''
}
watch(Param.value, async (newName, oldName) => {
  Param.value.addRehabilitationDetailReq.rehabilitationDate = newDate(Param.value.addRehabilitationDetailReq.rehabilitationDate)
  console.log(newName);
  emit('handleParam', newName, radio1)
}, {
  deep: true,
});
watch(Param2.value, async (newName, oldName) => {
  console.log(newName);
  emit('handleFlge', newName, radio1)
}, {
  deep: true,
});


</script>

<style>
.title {
  display: flex;
  padding: 10px 20px;
}

.add-choice {
  color: #fff;
  background: #000;
  padding: 5px 10px;
  border-radius: 5px;
}

.content {
  padding-left: 50px;
}

.custom-class .el-date-picker__header-label {
  font-size: 12px !important;

}

.el-input {
  width: 300px !important;
}

.el-drawer.ltr {
  width: 50% !important;
}
</style>